<template>
  <div class="home">
    <div class="title">
      <p>todos</p>
    </div>
    <div class="content">
      <div class="top">
        <el-icon :style="{color:data.checkAll==false?'#ccc':'black'}" @click="allChecked">
          <ArrowDown />
        </el-icon>
        <input v-model="data.value" @keydown.enter="add" type="text" placeholder="what needs to be done？" />
      </div>
      <div class="list">
        <ul>
          <li v-for="(item,index) in data.list" :key="index">
            <input @change="changeCheck(index)" type="checkbox" v-model="item.checked" />
            <p @click="item.flag=true" v-show="item.checked==false && item.flag==false">{{item.title}}</p>
            <input class="input" @keydown.enter="item.flag=false" type="text" v-model="item.title" v-show="item.flag==true && item.checked==false">
            <s v-show="item.checked==true">{{item.title}}</s>
            <span @click="del(index)">X</span>
          </li>
        </ul>
      </div>
      <footer>
        <div class="item1">{{data.num}} item left</div>
        <div class="item2">
            <p @click="cut(0)" :class="{active:data.active==0}">All</p>
            <p @click="cut(1)" :class="{active:data.active==1}">Active</p>
            <p @click="cut(2)" :class="{active:data.active==2}">Completed</p>
        </div>
      </footer>
    </div>
  </div>
</template>
<script setup>
import {useStore} from 'vuex'
import {reactive,computed} from 'vue'
const {commit,state} = useStore()
const data=reactive({
    value:'',
    active:-1,
    list:computed(()=>state.list),
    num:computed(()=>state.list.length),
    checkAll:false,
    flag:false
})
const add =()=>{
    commit('add',data.value)
    data.value=''
}
const cut =(i)=>{
    data.active=i
    if(i==0){
        data.list=computed(()=>state.list)
        data.num=computed(()=>state.list.length)
    }
    if(i==1){
        data.list=computed(()=>state.list.filter(item=>item.checked==false))
        data.num=computed(()=>state.list.filter(item=>item.checked==false).length)
    }
    if(i==2){
        data.list=computed(()=>state.list.filter(item=>item.checked==true))
        data.num=computed(()=>state.list.filter(item=>item.checked==true).length)
    }
}
const del =(i)=>{
    commit('del',i)
}
const changeCheck=(i)=>{
    commit('changeCheck',i)
    data.checkAll= state.list.every(item=>item.checked)
}
const allChecked=()=>{
    if(data.checkAll==false){
        data.list.forEach(item =>item.checked=true);
        data.checkAll=true
    }else{
         data.list.forEach(item =>item.checked=false);
         data.checkAll=false
    }
    
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .title {
    text-align: center;
    font-size: 100px;
    color: #ead7d7;
  }
  .content {
    box-shadow: 1px 1px 3px #ccc;
    border-top: 1px solid #ccc;
    width: 600px;
    margin: 20px auto;
    .top {
      box-shadow: 1px 1px 3px #ccc;
      width: 600px;
      background: #fff;
      display: flex;
      padding: 15px;
      padding-left: 30px;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      color: #e6e6e6;
      input {
        width: 90%;
        border: none;
        outline: none;
        font-size: 24px;
        font-family: inherit;
        font-style: italic;
        color: #e6e6e6;
      }
    }
    .list {
      background: #fff;
      box-shadow: 1px 2px 3px #ccc;
      ul {
        li {
          box-sizing: border-box;
          font-size: 24px;
          padding: 15px;
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          align-items: center;
          .input{
            width: 80%;
            border: none;
            outline: none;
            font-size: 24px;
          }
          input {
            width: 30px;
            height: 30px;
            margin: 0 15px;
          }
          p{
            width: 85%;
          }
          s{
            width: 85%;
            color: #ccc;
          }
          span{
            display: none;
            width: 20px;
          }
        }
        li:hover span{
            display: block;
            color: #cc9a9a;
        }
      }
    }
  }
  footer{
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    color: #777780;
    align-items: center;
    .item1{
        width: 35%;
    }
    .item2{
        flex: 1;
        display: flex;
        p{
            margin-right: 15px;
            padding: 5px;
        }
        .active{
            border: 1px solid #cc9a9a;
            border-radius: 5px;
        }
    }
  }
}
</style>